<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/9/10
  Time: 20:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
    <head>
        <style>
            .layui-table-cell {
               /* height: auto !important;*/
                white-space: normal;
                width: 50px;
            }
        </style>
        <meta charset="utf-8">
        <title>轮播图</title>
        <link rel="stylesheet" href="../layui/css/layui.css">
        <link href="../layui/css/layui.css" rel="stylesheet">
        <script src="../js/jquery-1.12.4.js" type="text/javascript"></script>
        <script src="../layui/layui.js" type="text/javascript"></script>
        <script type="text/javascript">


            layui.use(['table','form','layer'], function(){
                var table = layui.table;
                var form = layui.form;

                //第一个实例
                table.render({
                    elem: '#bannerTable',
                    url: '${pageContext.request.contextPath}/banner/selectBanner', //数据接口
                    page: true, //开启分页
                    toolbar:"#bannerToolbar",
                    cols: [[ //表头
                        {type:"checkbox"},
                        {field: 'bannerId', title: '编号', width:100, sort: true,align:'center'},
                        {title: '图片',templet:"#imgTemplet",align:'center'},
                        {field: 'bannerOldName', title: '名字',align:'center'},
                        {field: 'bannerDate', title: '上传时间',align:'center'},
                        {field: 'bannerState', templet: '#bannerState',align:'center'},
                        {field: 'bannerDescription', title: '图片描述',align:'center'},
                        {title: '操作',templet:"#doTemplet",align:'center'}
                    ]]
                });

                //监听上传轮播图的提交
                form.on('submit(addBanner)', function(data){
                    /*console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                    console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                    console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}*/
                    var formDate = new FormData(document.getElementById("addBannerForm"));
                    $.ajax({
                        url:"${pageContext.request.contextPath}/banner/addBanner",
                        type:"post",
                        processData:false,
                        contentType:false,
                        async:false,
                        cache:false,
                        data:formDate,
                        success:function (data) {
                            layer.closeAll("page");
                            if (data.isAdd) {
                                layer.alert("添加成功",{time:1000});

                            }else {
                                layer.alert("添加失败",{time:1000});
                            }
                            //修改成功之后刷新页面数据 重载页面
                            table.reload("bannerTable");
                        }
                    })
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });

                    //监听修改轮播图的提交
                form.on('submit(updateBanner)', function(data){
                    /*console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                    console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                    console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}*/
                    var formDate = new FormData(document.getElementById("updateBannerForm"));
                    $.ajax({
                        url:"${pageContext.request.contextPath}/banner/updateBanner",
                        type:"post",
                        processData:false,
                        contentType:false,
                        async:false,
                        cache:false,
                        data:formDate,
                        success:function (data) {
                            layer.closeAll("page");
                            if (data.isUpdate) {
                                layer.alert("修改成功",{time:1000});

                            }else {
                                layer.alert("修改失败",{time:1000});
                            }
                            //修改成功之后刷新页面数据 重载页面
                            table.reload("bannerTable");
                        }
                    })
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });

            });

            //修改按钮的点击事件
            function addBanner() {
                //每次打开弹出层之前先重置一下表单
                $("#addBannerForm")[0].reset();
                var layer = layui.layer;
                layer.open({
                    title:"上传轮播图图片",
                    type: 1,
                    content: $("#addBannerForm"), //这里content是一个普通的String
                    area:"400px",
                    maxmin: true
                });
            }
            //图片回显的函数
            function addNewFile() {
                var windowURL = window.URL || window.webkitURL;
                var loadImg = windowURL.createObjectURL(document.getElementById('bannerImg1').files[0]);
                document.getElementById('bannerImg').setAttribute('src',loadImg);
            }

        //修改时图片回显的函数
        function newFile() {
            var windowURL = window.URL || window.webkitURL;
            var loadImg = windowURL.createObjectURL(document.getElementById('bannerImg3').files[0]);
            document.getElementById('bannerImg4').setAttribute('src',loadImg);
        }

            //点击删除的函数
            function deleteBanner(bannerId) {
                var table = layui.table;
                //当点击删除时，向后台发送ajax请求 执行删除
                //数据库删除数据是很危险的事情，所以最好页面弹出提示框询问是否删除
                $.ajax({
                    url:"${pageContext.request.contextPath}/banner/deleteBanner",
                    data:"bannerId="+bannerId,
                    success:function (data) {
                        if (data.isDelete) {
                            layer.alert("删除成功",{time:1000})
                        }else {
                            layer.alert("删除失败",{time:1000})
                        }
                        //刷新数据 表格重载
                        table.reload("bannerTable");
                    },
                    error:function (data) {
                        layer.msg("没有权限",{time:2000})
                    }
                })
            }

            //点击修改时，需要先查询出当前行的数据 将数据展示在页面
            //然后在展示在表单中，弹出表单
        function updateBanner(bannerId) {
            //先根据id查询出来一个一条数据 把数据添加到表单中
            $.ajax({
                url:"${pageContext.request.contextPath}/banner/selectOne",
                data:{"bannerId":bannerId},
                success:function (data) {
                    $("#bannerId").val(data.bannerId)
                    $("#bannerOldName").val(data.bannerOldName);
                    $("#bannerImg4").attr('src',"${pageContext.request.contextPath}"+data.bannerImageUrl);
                    $("#bannerDescription").val(data.bannerDescription);
                    //弹出弹出层
                    layer.open({
                        title:"修改轮播图图片",
                        type: 1,
                        content: $("#updateBannerForm"), //这里content是一个普通的String
                        area:"400px",
                        maxmin: true
                    });
                }
            })
        }

        </script>
        <script type="text/html" id="doTemplet">
            <button type="button" class="layui-btn" onclick="updateBanner('{{d.bannerId}}')">
                修改
            </button>
            <button type="button" class="layui-btn layui-btn-danger" onclick="deleteBanner('{{d.bannerId}}')">
                删除
            </button>
        </script>
        <script type="text/html" id="bannerState">
        {{#  if(d.bannerState == 0){ }}
        正常显示
        {{#  } else { }}
        冻结
        {{#  } }}
    </script>
        <script type="text/html" id="imgTemplet">
            <img src="${pageContext.request.contextPath}{{d.bannerImageUrl}}" width="100px"/>
        </script>
    </head>
    <body>
        <%--轮播图的展示--%>
        <table id="bannerTable" lay-filter="cmfz_table"></table>

        <%--数据表格绑定工具栏--%>
        <div id="bannerToolbar" style="display: none;">
            <shiro:hasPermission name="banner:create">
            <button type="button" class="layui-btn" onclick="addBanner()">
                <i class="layui-icon layui-icon-add-1"></i>上传
            </button>
            </shiro:hasPermission>
            <shiro:hasRole name="superadmin">
            <button type="button" class="layui-btn layui-btn-danger" onclick="multiDelete()">
                <i class="layui-icon layui-icon-delete"></i>批量删除
            </button>
            </shiro:hasRole>
            <%--<shiro:principal/>
            <shiro:user>hehh</shiro:user>--%>
        </div>

        <%--上传轮播图的form表单--%>
        <form class="layui-form" action="" id="addBannerForm" style="display: none">
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="bannerOldName" required  lay-verify="required" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上传图片</label>
                <div class="layui-input-block">
                    <input type="file" onchange="addNewFile()" id="bannerImg1" name="bannerImg" required  lay-verify="required" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" >
                <label class="layui-form-label"></label>
                <img id="bannerImg" width="100px" height="100px">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">轮播图状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="bannerState" value="0" title="正常" checked>
                    <input type="radio" name="bannerState" value="1" title="冻结">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">文本域</label>
                <div class="layui-input-block">
                    <textarea name="bannerDescription" placeholder="请输入图片介绍" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="addBanner">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

        <%--修改轮播图的form表单--%>
        <form class="layui-form" action="" id="updateBannerForm" style="display: none">
            <div class="layui-form-item">
                <div class="layui-input-block" >
                    <input style="display: none" id="bannerId" type="text" name="bannerId" required  lay-verify="required" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input id="bannerOldName" type="text" name="bannerOldName" required  lay-verify="required" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上传图片</label>
                <div class="layui-input-block">
                    <input type="file" onchange="newFile()" id="bannerImg3" name="bannerImg" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" >
                <label class="layui-form-label"></label>
                <img id="bannerImg4" width="100px" height="100px">
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">图片介绍</label>
                <div class="layui-input-block">
                    <textarea id="bannerDescription" name="bannerDescription" placeholder="请输入图片介绍" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="updateBanner">确认修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </body>
</html>
